import React, { useState } from 'react'
import './scoreTab.less'
import {
    Button,
    Table,
    Space,
    Dropdown,
    Menu,
    Typography,
    Popconfirm
} from 'antd'
import { DownOutlined } from '@ant-design/icons'
import { selectScoreAsync, deleteScoreAsync } from '../../api/score'
import ScoreForm from './ScoreForm'
const { Title } = Typography

function ScoreTab(props) {
    const [showData, setShowData] = useState([])
    const [choiceExamInfo, setChoiceExamInfo] = useState({})
    const [modalVisible, setModalVisible] = useState(false)
    const [modalData, setModalData] = useState([])
    const {
        classData,
        studentData,
        examData,
        scoreData,
        setScoreData,
        pageLoading,
        setPageLoading
    } = props
    // 异步请求函数抽象
    const asyncRequest = async (fn, payload) => {
        payload = payload || []
        const res = await fn(...payload)
        if (res.code === 0) {
            return res.data ? res.data : true
        }
    }
    // 切换考试事件
    const changeExamEvent = async (e) => {
        setPageLoading(true)
        setChoiceExamInfo(examData.filter((item) => +item.no === +e.key)[0])
        setShowData(
            scoreData
                .filter((item) => +item.examNo === +e.key)[0]
                .list.map((item, i) => {
                    // console.log(item)
                    const { name: studentName, classNo } = studentData.filter(
                        (cell) => +cell.no === +item.studentNo
                    )[0]
                    // console.log(classNo)
                    const { name: className } = classData.filter(
                        (cell) => +cell.no === +classNo
                    )[0]
                    return {
                        index: i + 1,
                        studentNo: item.studentNo,
                        studentName,
                        className,
                        chinese: item.chinese,
                        math: item.math,
                        eglish: item.eglish,
                        physics: item.physics,
                        chemistry: item.chemistry,
                        biology: item.biology,
                        total:
                            +item.chinese +
                            +item.math +
                            +item.eglish +
                            +item.physics +
                            +item.chemistry +
                            +item.biology
                    }
                })
        )

        setPageLoading(false)
    }
    // 编辑按钮点击事件
    const updateButtonEvent = (text, record) => {
        setModalVisible(true)
        setModalData(record)
    }
    // 删除按钮点击事件
    const deleteButtonEvent = async (text, record) => {
        // console.log(record)
        if (
            await asyncRequest(deleteScoreAsync, [
                choiceExamInfo.no,
                record.studentNo
            ])
        ) {
            setScoreData(await asyncRequest(selectScoreAsync))
        }
    }
    // 对话框中确认按钮点击事件
    const modalOk = () => {
        setModalVisible(false)
    }
    // 对话框中取消按钮点击事件
    const modalCancel = () => {
        setModalVisible(false)
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            sorter: (a, b) => a.index - b.index
        },
        {
            title: '班级',
            dataIndex: 'className',
            key: 'className',
            filters: classData.map((item) => ({
                text: item.name,
                value: item.name
            })),
            onFilter: (value, record) => record.className.indexOf(value) === 0
        },
        {
            title: '学号',
            dataIndex: 'studentNo',
            key: 'studentNo',
            sorter: (a, b) => a.studentNo - b.studentNo
        },
        {
            title: '姓名',
            dataIndex: 'studentName',
            key: 'studentName',
            sorter: (a, b) => a.studentName.localeCompare(b.studentName)
        },
        {
            title: '语文',
            dataIndex: 'chinese',
            key: 'chinese',
            sorter: (a, b) => a.chinese - b.chinese
        },
        {
            title: '数学',
            dataIndex: 'math',
            key: 'math',
            sorter: (a, b) => a.math - b.math
        },
        {
            title: '英语',
            dataIndex: 'eglish',
            key: 'eglish',
            sorter: (a, b) => a.eglish - b.eglish
        },
        {
            title: '物理',
            dataIndex: 'physics',
            key: 'physics',
            sorter: (a, b) => a.physics - b.physics
        },
        {
            title: '化学',
            dataIndex: 'chemistry',
            key: 'chemistry',
            sorter: (a, b) => a.chemistry - b.chemistry
        },
        {
            title: '生物',
            dataIndex: 'biology',
            key: 'biology',
            sorter: (a, b) => a.biology - b.biology
        },
        {
            title: '总分',
            dataIndex: 'total',
            key: 'total',
            sorter: (a, b) => a.total - b.total
        },
        {
            title: '操作',
            key: 'handle',
            render: (text, record) => (
                <Space size="small">
                    <Button
                        type="primary"
                        size="small"
                        onClick={() => {
                            updateButtonEvent(text, record)
                        }}
                    >
                        成绩录入
                    </Button>
                    <Popconfirm
                        title="是否确定要删除？"
                        onConfirm={() => {
                            deleteButtonEvent(text, record)
                        }}
                    >
                        <Button type="danger" size="small">
                            清空
                        </Button>
                    </Popconfirm>
                </Space>
            )
        }
    ]
    const menu = (
        <Menu
            onClick={(e) => {
                changeExamEvent(e)
            }}
        >
            {examData.length ? (
                examData.map((item) => {
                    return <Menu.Item key={item.no}>{item.name}</Menu.Item>
                })
            ) : (
                <span>暂无考试</span>
            )}
        </Menu>
    )
    return (
        <div className="score-tab-container">
            <div className="score-tab-title">
                <span>请选择想要操作的考试：</span>
                <Dropdown overlay={menu}>
                    <Button type="primary">
                        考试列表 <DownOutlined />
                    </Button>
                </Dropdown>
            </div>
            <Title className="table-title">{choiceExamInfo.name || ''}</Title>
            <Table
                columns={columns}
                dataSource={showData}
                loading={pageLoading}
                rowKey={(item) => item.index}
            />
            <ScoreForm
                modalData={modalData}
                modalVisible={modalVisible}
                modalOk={modalOk}
                modalCancel={modalCancel}
            />
        </div>
    )
}

export default ScoreTab
